<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/views/include/nocachehead.jsp"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/calendar.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
	function getCountries(userCountry, userProvince, userCity) {
		var country = document.getElementById("country");
		$.ajax({
			url : "/skyline/site/getCountries.html",
			type : "POST",
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=utf-8",
			success : function(msg) {
				for ( var i = 0; i < msg.length; i++) {
					var varItem = new Option(msg[i].name, msg[i].name + "-"
							+ msg[i].id);
					if (msg[i].name == userCountry) {
						varItem.selected = true;
					}
					country.options.add(varItem);
				}
				getProvinces(userProvince, userCity);
			}
		});
	}
	function getProvinces(userProvince, userCity) {
		var province = document.getElementById("province");
		var country = document.getElementById("country").value;
		var countryId = country.split("-")[1];
		$.ajax({
			url : "/skyline/site/getSubSites.html",
			type : "POST",
			data : "siteId=" + countryId,
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=utf-8",
			success : function(msg) {
				province.options.length = 0;
				for ( var i = 0; i < msg.length; i++) {
					var varItem = new Option(msg[i].name, msg[i].name + "-"
							+ msg[i].id);
					if (msg[i].name == userProvince) {
						varItem.selected = true;
					}
					province.options.add(varItem);
				}
				getCities(userCity)
			}
		});
	}
	function getCities(userCity) {
		var city = document.getElementById("city");
		var province = document.getElementById("province").value;
		var provinceId = province.split("-")[1];
		$.ajax({
			url : "/skyline/site/getSubSites.html",
			type : "POST",
			data : "siteId=" + provinceId,
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=utf-8",
			success : function(msg) {
				city.options.length = 0;
				for ( var i = 0; i < msg.length; i++) {
					var varItem = new Option(msg[i].name, msg[i].name + "-"
							+ msg[i].id);
					if (msg[i].name == userCity) {
						varItem.selected = true;
					}
					city.options.add(varItem);
				}
			}
		});
	}
	function CheckItem(FieldID, FieldName, MaxLength) {
		//alert("  ");
		var Field = document.getElementById(FieldID);
		var Msg = document.getElementById("Msg_" + FieldID);

		if (Field.value.length > MaxLength) {

			Msg.style.display = "block";
			document.getElementById("Img_" + FieldID).src = "img/commons/success_min.gif";
			document.getElementById("Font_" + FieldID).color = "red";
			document.getElementById("Font_" + FieldID).innerHTML = FieldName
					+ "超过最大长度" + MaxLength + ",请重新输入!";
			Field.className = "InputError";
			return false;
		} else {
			Msg.style.display = "block";
			document.getElementById("Img_" + FieldID).src = "img/commons/success_min.gif";
			document.getElementById("Font_" + FieldID).color = "black";
			document.getElementById("Font_" + FieldID).innerHTML = FieldName
					+ "输入正确";
			Field.className = "InputOK";
			return true;
		}
	}

	function CheckAll() {
		if (CheckItem('nickname', '昵称', 20) & CheckItem('realname', '真实姓名', 20)
				& CheckItem('address', '现居地', 60)
				& CheckItem('hometown', '家乡', 60)) {

			document.all.UserInfoForm.submit();
			//return true;
		} else {
			alert("个人信息输入有误，请重新填写！");
			return false;
		}
	}

	function initialCountry(country, province, city) {
		getCountries(country, province, city);
		//getProvinces(province);
		//getCities(city);
		//alert();
	}

	//img
	function preview(img, selection) {
		if (!selection.width || !selection.height)
			return;

		var scaleX = 100 / selection.width;
		var scaleY = 100 / selection.height;
		var _img = new Image();
		_img.src = $('#photo').attr("src");
		var img_w = _img.width;

		$('#preview img').css({
			width : Math.round(scaleX * _img.width),
			height : Math.round(scaleY * _img.height),
			marginLeft : -Math.round(scaleX * selection.x1),
			marginTop : -Math.round(scaleY * selection.y1)
		});

		$('#x1').val(selection.x1);
		$('#y1').val(selection.y1);
		$('#x2').val(selection.x2);
		$('#y2').val(selection.y2);
		$('#w').val(selection.width);
		$('#h').val(selection.height);
	}

	function init() {
		var _img = new Image();
		_img.src = $('#photo').attr("src");
		var img_w = _img.width;
		var img_h = _img.height;
		var _min = ((img_w > img_h) ? img_h : img_w);
		$('#photo').imgAreaSelect({
			x1 : img_w / 2 - (_min * 0.6) / 2,
			y1 : img_h / 2 - (_min * 0.6) / 2,
			x2 : img_w / 2 - (_min * 0.6) / 2 + _min * 0.6,
			y2 : img_h / 2 - (_min * 0.6) / 2 + _min * 0.6,
			aspectRatio : '1:1',
			handles : true,
			onSelectChange : preview
		});
	}
</script>

<style type="text/css">
.imgareaselect-border1 {
	background: url(border-anim-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
	background: url(border-anim-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
	background: url(border-anim-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
	background: url(border-anim-h.gif) repeat-x left bottom;
}

.imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4
	{
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.imgareaselect-handle {
	background-color: #fff;
	border: solid 1px #000;
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.imgareaselect-outer {
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.imgareaselect-selection {
	
}
</style>
</head>
<body
	onload="initialCountry('${personalInfo.country}','${personalInfo.province}','${personalInfo.city}')">
	<form id="updatePersonalInfo"
		action="<%=request.getContextPath()%>/user/updateinfo.html"
		method="post">
		<table>
			<tr>
				<td colspan="2">基本信息:
					<hr></td>
			</tr>
			<tr>
				<td align="right">真实姓名:</td>
				<td><input type="text" class="updatePersonalInfo" id="name"
					name="name" value="${personalInfo.name}"
					onBlur="CheckItem('name','姓名',20)" />
				</td>
			</tr>
			<tr>
				<td align="right">昵称:</td>
				<td><input type="text" class="updatePersonalInfo" id="nickname"
					name="nickname" value="${personalInfo.nickname}"
					onBlur="CheckItem('nickname','昵称',20)" />
				</td>

			</tr>
			<tr>
				<td align="right">来自:</td>
				<td><select id="country" name="country"
					onchange="getProvinces('${personalInfo.province }','${personalInfo.city}')">

				</select> &nbsp; <select id="province" name="province"
					onchange="getCities('${personalInfo.city}')">

				</select> &nbsp; <select id="city" name="city">

				</select>
				</td>
			</tr>
			<tr>
				<td>
					<div align="right">性别:</div></td>
				<td><c:choose>
						<c:when test="${personalInfo.sex == 'MALE' }">
							<label> <input name="sex" type="radio" id="sex"
								value="MALE" checked="checked" /> 男 </label>
							<label> <input name="sex" type="radio" id="sex"
								value="FEMALE" /> 女 </label>
						</c:when>
						<c:otherwise>
							<label> <input name="sex" type="radio" id="sex"
								value="MALE" />男 </label>
							<label> <input name="sex" type="radio" id="sex"
								value="FEMALE" checked="checked" /> 女 </label>
						</c:otherwise>
					</c:choose>
				</td>
			</tr>
			<tr>
				<td>
					<div align="right">生日:</div></td>
				<td><label> <input type="text" name="birthday"
						id="birthday" value="${personalInfo.birthday}"
						onclick="SelectDate(this)" readonly="readonly" /> </label>
				</td>
			</tr>

			<tr>
				<td align="right">毕业学校 :</td>
				<td><input type="text" id="graduateshool" name="graduateshool"
					value="${personalInfo.graduateSchool}" />
				</td>
			</tr>
			<tr>
				<td align="right">职业:</td>
				<td><input type="text" id="job" name="job"
					value="${personalInfo.job}" />
				</td>
			</tr>
			<tr>
				<td colspan="3">通信信息:
					<hr></td>
			</tr>
			<tr>
				<td align="right">MobilePhone:</td>
				<td><input type="text" id="mobilephone" name="mobilephone"
					value="${personalInfo.mobilephone}" />
				</td>
			</tr>
			<tr>
				<td align="right">QQ:</td>
				<td><input type="text" id="qq" name="qq"
					value="${personalInfo.qq}" />
				</td>
			</tr>
			<tr>
				<td align="right">MSN:</td>
				<td><input type="text" id="msn" name="msn"
					value="${personalInfo.msn}" />
				</td>
			</tr>
			<tr>
				<div id="container">


					<div class="frame" style="margin: 0 0.3em;">
						<img id="photo" src="/skyline/image/cover_s.jpg" onload=init()>
					</div>

					<div id="preview"
						style="width: 100px; height: 100px; overflow: hidden;">
						<img src="/skyline/image/cover_s.jpg"
							style="width: 283px; height: 283px; margin-left: -91px; margin-top: -65px;">
					</div>
				</div>
			</tr>
			<tr height="36">
				<td colspan="2" align="right"><input type="submit"
					name="submit" value="submit"> <input type="reset"
					value="reset">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>